const homepodSection = document.querySelector(".homepod-section")
const sectionHeight = homepodSection.getBoundingClientRect().height
const html = document.documentElement

document.addEventListener("scroll", () => {
  let value = (html.scrollTop - homepodSection.offsetTop) / (sectionHeight - html.clientHeight)

  if(value < 0 ) return
  
  homepodSection.style.setProperty('--part-1', calculateOpacity(0, 0.19, value))
  homepodSection.style.setProperty('--part-2', calculateOpacity(0.20, 0.32, value))
  homepodSection.style.setProperty('--part-3', calculateOpacity(0.33, 0.5, value))
  homepodSection.style.setProperty('--part-4', calculateOpacity(0.5, 0.8, value))
  homepodSection.style.setProperty('--ending', calculateOpacity(0.8, 1, value))
  
})

function calculateOpacity(start, end, precent){
  if(precent < start) return 0
  if(precent > end) return 1
  return (precent - start) / (end - start)
  
}